<template>
        <div class="wrapper">
            <div 
                class="icon"
                v-for="item of iconList"
                :key="item.id"
            >
                <img              
                    class="img"
                    :src="item.imgUrl"
                    :class="[item.color]"
                />
                 <div class="icon-desc">{{item.desc}}</div>
            </div>           
        </div>
</template>   

<script>
export default{
    name:'homeCatalog',
    data(){
        return {
            red:'red',
            green:'green',
            orange:'orange',
            blue:'blue',
            iconList:[
                {
                    id:'1001',
                    imgUrl:'https://pic5.40017.cn/01/000/84/4f/rBLkBVmLtaiAcmRaAAAEH9JbM6g234.png',
                    desc:'本地热推',
                    color:'orange'
                },
                 {
                    id:'1002',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
                    desc:'亲子游',
                    color:'green'
                },
                 {
                    id:'1003',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/db/rBLkCVmEGfeAVI4FAAAEXdabEDE534.png',
                    desc:'温泉预售',
                    color:'blue'
                },
                 {
                    id:'1004',
                    imgUrl:'https://pic5.40017.cn/02/001/6d/e2/rBLkCFmEG8eALBI8AAAEA1xXmqI793.png',
                    desc:'自然风光',
                    color:'red'
                }
            ]
        }
    }
}


</script>  

<style lang="stylus" scoped>
.wrapper
    background:#fff
    padding-top .2rem
    .icon
        width:25%
        float left
        .img
            display:block
            background :red
            border-radius:1rem
            margin :0 auto  
        .red
            background red  
        .green
            background green
        .orange
            background orange
        .blue
            background blue
                
    .icon-desc
        text-align :center
        padding-top .2rem
        padding-bottom .5rem

</style>